<template>
	<view class="base-card">
		<u-grid  :col="props.col" :border="false">
			<u-grid-item v-for="(baseListItem,baseListIndex) in props.renderList" :key="baseListIndex" @click="goMangaDetail(baseListItem)">
				<u--image :showLoading="true" :src="baseListItem.src" mode="aspectFit" width="150px" height="200px">
					<template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u--image>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script setup>
	import {goMangaDetail} from '../utils/routerNavigator.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	
	let props = defineProps({
		col:{
			type:Number,
			default:2
		},
		renderList:{
			type:Array,
			default:()=>[]
		},
	})

	
</script>

<style lang="scss" scoped>
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
	
	.base-card{
		padding: 20px;
		
		
	}
	
	:deep(.u-grid){
		// justify-content: space-around !important;
		
		.u-grid-item{
			// margin: 1px;
			// background-color: #fff !important; 
			
			.u-image{
				background-color: #fff !important;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
			}
			
			.grid-text{
				margin: 0.3125rem 0 0.625rem 0;
				padding: 0;
				max-width: 150px;
				height: 35px;
				display: -webkit-box !important;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical !important;
			}
		}
	}
</style>
